<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String base = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>

<style>
	.list-group-item{
		cursor: pointer;
		border: 0px solid!important;
	}
	h4:hover{
		transform: scale(1.4);
	}
	a{
		text-decoration:none!important;
	}
</style>

<div class="row">
	<div class="page-header">
		<h3 style="display: inline;">
			语言 <small>Language</small>
		</h3>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-2">
				<div data-spy="affix" data-offset-top="60">
					<ul class="list-group">
						<li class="list-group-item text-success" data-toggle="modal" data-target="#addCatagoryModal"><h4><span class="glyphicon glyphicon-forward" aria-hidden="true"></span>&nbsp;新增</h4 ></li>
					</ul>
				</div>
			</div>
			<div class="col-md-10">
					<c:forEach items="${catagories }" var="catagory">
						<div class="col-md-3">
							<div class="thumbnail">
								<h4>
									<a href="<%=base%>/catagory/${catagory.catagoryId}">${catagory.name }</a>
								</h4>
							</div>
						</div>
					</c:forEach>
			</div>
		</div>

	</div>

</div>

<div id="addCatagoryModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">新增</h4>
			</div>
			<div class="modal-body">
			<div id="tipsAlert" class="alert alert-success alert-dismissible" role="alert" hidden="hidden">
  <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
  <strong>Warning!</strong>
</div>
				<form class="form-horizontal">
					<div class="form-group">
						<label for="catagoryName" class="col-sm-2 control-label">名称</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="catagoryName"
								placeholder="name">
						</div>
					</div>
					<div class="form-group">
						<label for="catagoryDesc" class="col-sm-2 control-label">描述</label>
						<div class="col-sm-9">
							<textarea id="catagoryDesc" class="form-control" rows="3"></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-success" onclick="javascript:catagory.add();">保存</button>
			</div>
		</div>
	</div>
</div>
<script src="<%=base %>/js/catagory.js"></script>
<script>
$(function(){
	$('#addCatagoryModal').on('hidden.bs.modal', function (e) {
		  $("#tipsAlert").hide();
		  window.location.reload();
		});
	
});

function addCatagory(){
	catagory.add();
}
</script>
